<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { reactive } from "@vue/reactivity";
import { onMounted, ref } from 'vue';

// 获取数据
onMounted(() => { 
    getList()
})

// 搜索
const searchKey = ref('')
const onSearch = () => {
    getList()
}

// 列表数据
const data = reactive<any>({
    list: [],
    pageIndex: 1,
    pageSize: 20,
    loading: false
})
const getList = () => {
    data.loading = true
    setTimeout(() => {
        data.loading = false
        const arr = [];
        for(let i = 0; i < 50; i++) {
            arr.push({id: i + 1, name: '阎王', content: '篡改了生死簿', place: '首页 - 生死簿', time: '鬼历999年'});
        }
        data.list = arr
    }, 1000)
}
const onSizeChange = (value: number) => {
    data.pageSize = value
    getList()
}
const onCurrentChange = (value: number) => {
    data.pageIndex = value
    getList()
}
</script>

<template>
    <!-- 日志管理 -->
    <div class="journal">
        <div class="z-option">
            <div class="option-left">
                <div class="option-item">
                    <el-input v-model="searchKey" size="large" placeholder="输入要搜索的内容" :suffix-icon="Search" />
                </div>
                <div class="option-item">
                    <el-button type="primary" size="large" @click="onSearch">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="z-table">
            <el-table :data="data.list" v-loading="data.loading" max-height="710" size="large">
                <el-table-column prop="id" label="id" width="100" />
                <el-table-column prop="name" label="操作人员" width="200" />
                <el-table-column prop="content" label="日志内容" />
                <el-table-column prop="place" label="具体位置" />
                <el-table-column prop="time" label="时间" />
                <el-table-column label="操作" align="center" width="300">
                    <el-button type="primary" link>查看</el-button>
                    <el-button type="warning" link>恢复</el-button>
                </el-table-column>
            </el-table>
        </div>
        <div class="z-pagination">
            <el-pagination background layout="total, prev, pager, next, sizes" :total="100" :page-sizes="[10, 15, 20]" @size-change="onSizeChange" @current-change="onCurrentChange"></el-pagination>
        </div>
    </div>
</template>

<style scoped lang="scss">

</style>